<template>
  <div class="nav">
    <div class="nav-wrap">
      <div class="wrap-one">
        <p class="one-d">定制体检</p>
        <p class="one-click">点击右侧开始</p>
      </div>
      <div class="jiantou-w">
        <img class="jiantou" src="../assets/images2/12.png" alt="" />
      </div>

        <ul class="ul-one" v-for="item of Dimg" :key="item.id">
          <li >
            <img :src="item.imgUrl" alt=""/>
            <p class="chooseTc">{{item.dec}}</p>
          </li>
          <li class="icon" >
            <img :src="item.imgJT" alt="">
          </li>
        </ul>
        <ul class="ul-last">
          <li>
            <img src="../assets/images2/p9.png" alt="">
            <p class="chooseTc">选择套餐</p>
          </li>
        </ul>

    </div>
    <div class="love">
        <div class="love-one" v-for="lve of Gimg" :key="lve.id">
          <img :src="lve.imgUrl" alt="" />
          <p class="love-p">{{lve.dec}}</p>
        </div>
    </div>
    <div class="center-nav">
      <div class="center-wrapper">
        <div class="center-f">
          <span class="hot">热门</span>
          体检中心
        </div>
          <ul class="center-choose">
            <li v-for="(tabList,index) of ites" @click="kuaidian(index)"  :class="{active:index===current}">{{tabList.choose}}</li>
          </ul>
          <span class="last">
          更多
          </span>




      </div>
      </div>
    <div class="third">
        <div class="third-wrapper " v-for="ttaocan of truetaocan">
          <div class="third-top">
            <img :src="ttaocan.imgUrl" alt="" />
            <div class="top-bottom">
              <div class="t-b-f">
                {{ttaocan.dec}}
              </div>
              <div class="t-b-l">
                <img src="../assets/images2/tu6.png" alt="" />
                {{ttaocan.name}}
              </div>
            </div>
          </div>
          <div class="third-bottom">
            <span>
               {{ttaocan.title}}
            </span>
          </div>
        </div>
      </div>

    <div class="center-nav">
      <div class="center-wrapper">
        <div class="center-f other">
          <span class="hot">精选</span>
          体检套餐
        </div>
        <ul class="center-choose">
          <li v-for="(tab,index) of ite" @click="kuaidians(index)"  :class="{active:index===currents}">{{tab}}</li>
        </ul>
        <span class="last">
          更多
          </span>




      </div>
    </div>
    <div class="taocan-wrapper">

        <div class="taocan" v-for="tc of taocan">
          <img :src="tc.imgUrl" alt="" />
          <div class="tc-new">
            <span class="titlespan ">{{tc.title}}</span>
            <span class="truepeople size">适宜人群：{{tc.truepeople}} <br></span>
            <span class="yiyuan size">所属医院：{{tc.yiyuan}}<br></span>
            <span class="time size">体检时间：{{tc.time}}<br></span>
          </div>
            <div class="atlast">
              <span class="sold tlast">已售：{{tc.sold}}</span>
              <span class="appraisal tlast">评价：{{tc.appraisal}}</span>
              <span class="oldprice tlast">￥{{tc.oldprice}}</span>
              <span class="nowprice tlast">￥{{tc.nowprice}}</span>
            </div>


      </div>


    </div>
    <div class="center-nav">
      <div class="center-wrapper">
        <div class="center-f">
          <span class="hot">限时</span>
          特惠区
        </div>
      </div>
    </div>
    <div class="img-wrapper">

        <div class="img-content"  v-for="iaia of offer" >
          <img :src="iaia.imgUrl" alt="" />
        </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'VImage',
    data () {
      return {
        Dimg:[{
          id:'0020',
          imgUrl:require('../assets/images2/p1.png'),
          dec:'开始评估',
          imgJT:require('../assets/images2/13.png')
        },{
          id:'0021',
          imgUrl:require('../assets/images2/p2.png'),
          dec:'基本信息',
          imgJT:require('../assets/images2/13.png')
        },{
          id:'0022',
          imgUrl:require('../assets/images2/p3.png'),
          dec:'健康状况',
          imgJT:require('../assets/images2/13.png')
        },{
          id:'0023',
          imgUrl:require('../assets/images2/p4.png'),
          dec:'饮食习惯',
          imgJT:require('../assets/images2/13.png')
        },{
          id:'0024',
          imgUrl:require('../assets/images2/p5.png'),
          dec:'运动习惯',
          imgJT:require('../assets/images2/13.png')
        },{
          id:'0025',
          imgUrl:require('../assets/images2/p6.png'),
          dec:'生活习惯',
          imgJT:require('../assets/images2/13.png')
        },{
          id:'0026',
          imgUrl:require('../assets/images2/p7.png'),
          dec:'完成评估',
          imgJT:require('../assets/images2/13.png')
        },{
          id:'0027',
          imgUrl:require('../assets/images2/p8.png'),
          dec:'查看结果',
          imgJT:require('../assets/images2/13.png')
        }],
        Gimg:[{
          id:'0030',
          imgUrl:require('../assets/images2/1.jpg'),
          dec:'关爱父母'
        },{
          id:'0031',
          imgUrl:require('../assets/images2/1.jpg'),
          dec:'入职无忧'
        },{
          id:'0032',
          imgUrl:require('../assets/images2/1.jpg'),
          dec:'妇科体检'
        },{
          id:'0033',
          imgUrl:require('../assets/images2/1.jpg'),
          dec:'婚前体检'
        },{
          id:'0034',
          imgUrl:require('../assets/images2/1.jpg'),
          dec:'家庭体检'
        },{
          id:'0035',
          imgUrl:require('../assets/images2/1.jpg'),
          dec:'PET-CT'
        },{
          id:'0036',
          imgUrl:require('../assets/images2/1.jpg'),
          dec:'旅游体检'
        }],
        ites:[{choose:'公立三甲',show:false},{choose:'专业体验中心',show:false},{choose:'公立医院',show:false},{choose:'民营医院',show:false}],
        ite:['职场白领','入职体检','老年体检','孕前体检','常规体检','全身体检','中老年体检'],
        truetaocan:[{
          title:' 福建省人民医院体检中心（福建中医药大学附属xxxxxxxxxx）',
          name:'公立三甲',
          dec:'套餐：23   评价：270',
          imgUrl:require('../assets/images2/2.jpg')
        },{
          title:' 福建医科大学附属第一医院体检中心',
          name:'公立三甲',
          dec:'套餐：30   评价：223',
          imgUrl:require('../assets/images2/2.jpg')
        },{
          title:' 福建中医药大学附属福州中医院体检中心',
          name:'公立三甲',
          dec:'套餐：26   评价：61',
          imgUrl:require('../assets/images2/2.jpg')
        },{
          title:' 福建中医药大学附属福州中医院体检中心',
          name:'公立三甲',
          dec:'套餐：26   评价：61',
          imgUrl:require('../assets/images2/2.jpg')
        }],
        current:0,
        currents:0,
        taocan:[{
          imgUrl:require('../assets/images2/3.jpg'),
          title:'福州市中医院健康体检中心男性心理体检套餐',
          truepeople:'中年男性，老年男性 ',
          yiyuan:'福建中医药大学附属福州中医院体检中心 ',
          time:'周一至周天7:30-12:00（10:00前抽血截止）',
          sold:'393',
          appraisal:'61',
          oldprice:'1820',
          nowprice:'1646.8'
        },{
          imgUrl:require('../assets/images2/3.jpg'),
          title:'福州市中医院健康体检中心男性心理体检套餐',
          truepeople:'中年男性，老年男性 ',
          yiyuan:'福建中医药大学附属福州中医院体检中心 ',
          time:'周一至周天7:30-12:00（10:00前抽血截止）',
          sold:'393',
          appraisal:'61',
          oldprice:'1820',
          nowprice:'1646.8'
        },{
          imgUrl:require('../assets/images2/3.jpg'),
          title:'福州市第一医院健康体检中心男性检查',
          truepeople:'中年男性，老年男性，青年男性',
          yiyuan:'福州市第一医院体检中心 ',
          time:'周一至周天7:30-12:00（抽血时间为10:30之前）',
          sold:'744',
          appraisal:'242',
          oldprice:'700',
          nowprice:'630'
        },{
          imgUrl:require('../assets/images2/3.jpg'),
          title:'福建省地质医院关爱青年健康体检套餐',
          truepeople:'青年男性，亚健康人群 ',
          yiyuan:'福建省地质医院体检中心 ',
          time:'周一至周日，上午：7:30-12:00下午：14:00-17:00',
          sold:'184',
          appraisal:'120',
          oldprice:'501',
          nowprice:'325'
        }],
        offer:[{
          imgUrl:require('../assets/images2/4.gif')
        },{
          imgUrl:require('../assets/images2/4.gif')
        },{
          imgUrl:require('../assets/images2/4.gif')
        },{
          imgUrl:require('../assets/images2/4.gif')
        }]


      }
    },
    methods:{
      kuaidian(index){
        this.current=index;
      },
      kuaidians(index){
        this.currents=index;
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="stylus" scoped>

  @import "../assets/styles/same.styl"
  .tc-new{
    height:40%;
    width :90%;
    margin:0 auto;
  }
  .chooseTc{
    min-width 56px;
  }

  .t-i{
    height: 100%;
    width: 24%;
    display: inline-block;
  }
  .ul-one{
    width :9%;
  }
  .ul-last{
    width :4%;
  }
  span{


  }
  span>p{
    margin: 2px 0px 0px -5px;
  }
  *{
    margin: 0px;
    padding: 0;
  }
.nav{
  background-color:$bgcolor;
  width: 100%;
  margin-top:-14px;
  padding-top:23px;
  border-top:1px solid $bgcolor;
  min-width:1200px;
}
  .nav-wrap{
    width: 80%;
    height: 175px;
    background: #fff;
    margin:0 auto;
    margin-top:10px;
    display: flex;
    box-shadow:0px -1px 1px  1px #c1c1c1;
    min-width:1200px;
  }
  .wrap-one{
    height: 100%;
    width: 15%;
    text-align:center;
  }
  .one-d{
    width:100%;
    color: #00bfff;
    font-size: 32px;
    line-height: 166px;
    height: 68%;
  }
  .one-click{
    color:$nocolor;
    font-size: 14px;
  }
  ul{

    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align center;

  }
  .jiantou{
    width:30px;
    height:100%;
  }
    .jiantou-w{
      width :5%;
    }
  p{
    color:$nocolor;
    font-size: 14px;


  }
  ul>li{
    width:67px;

  }
  .icon>img{
    width:24px;
    margin-bottom 36px;
  }
  .love{
    width: 80%;
    height: 320px;
    margin:0 auto;
    margin-top:16px;
    min-width 1200px;
    overflow: hidden;
    display: flex;

  }
  .love-one{
    height: 100%;
    width: 14.2857%;
    border-top:1px solid $bgcolor;
    box-sizing: border-box;
    position: relative;

  }
  .love-one>img{
    z-index: 0;
    filter:brightness(0.7);
    width:100%;


  }
.love-p{
    width: 33px;
    font-size: 30px;
    color:#fff;
    word-wrap: break-word;

    position: absolute;
    top:24%;
    left: 43.5%;
    flex-direction: column;

  }
  .center-nav {
    background: #fff;
    width: 80%;
    margin: 0 auto;
    height: 60px;
    margin-top:20px;
    min-width 1200px;

  }
  .center-wrapper{
    display: flex;
    align-items: center;
    height: 60px;
    font-size: 12px;
    color:$nocolor;
    box-shadow:0px -1px 1px  1px #c1c1c1;
    position relative;

  }
  .center-f {
    min-width :300px;
    font-size: 18px;
    width :65%;
  }
  .hot{
    margin:0px -3px 0px 21px;
    color: $bule;
  }
  .last{
    margin:1px 1px 1px 1px;
    border-left:1px solid #c0c0c0;
    width:115px;
    height: 100%;
    text-align: center;
    line-height: 55px;
    display flex;
    justify-content center;
    align-items center;
  }
  .center-choose li{
    width:80px;
    height: 28px;
    line-height: 30px;
    border-radius: 4px;
    margin:0 auto;
    text-align: center;
    margin-left:8px;
    margin-right:27px;
    cursor:pointer;
  }
  .active{
    color:#fff;
    background:$bule;
  }
  .taocan-wrapper{
    margin:0 auto;
    width:80%;
    height: 565px;
    min-width :1200px;
    margin-top:26px;
    display:flex;
    justify-content space-between;
  }
  .taocan{

    width:23%;
    height: 565px;
    position: relative;
    background: #fff;
    box-shadow:0px -1px 1px  1px #c1c1c1;
  }

  .taocan>img{
    width:100%;
  }

  .titlespan{
    display: inline-block;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    width:93%;
    font-size: 18px;
    color:dimgray;
    height:20%;
    line-height :40px;

  }
  .size{
    font-size: 13px;
    color:dimgray;
    width:90%;
    text-align: left;
    display: inline-block;
    height:24px;
    line-height :21px;
  }
  .atlast{
    bottom:8px;


    position:absolute;
    width:100%;
    display: flex;
    justify-content space-around;
    align-items :baseline;
  }
  .tlast{
    margin-top:0;
    display:inline-block;
    font-size:13px;
    color:$nocolor;

  }
  .oldprice{
    text-decoration:line-through;
    color:$mincolor;
  }
  .nowprice{
    color:#ed6721;
    font-size: 20px;
  }
  .img-wrapper{
    width:80%;
    margin:0 auto;
    margin-top:20px;
    height: 320px;
    padding-bottom:60px;
    min-width :1200px;
    justify-content: space-between;
    display: flex;
  }
  .img-content{
    width:23%;
    height:100%;
    background: #fff;
    box-shadow:0px -1px 1px  1px #c1c1c1;
    text-align center;
  }
  .img-content>img{
    width:92%;
    margin-top:10px;
  }
  .tclast{
    margin-right:11px;
    float: right;
  }
  .other{
    width:41%
  }
  .third{
    width:80%;
    margin:0 auto;

    margin-top:20px;
    min-width 1200px;
    justify-content :space-between;
    display flex;
  }
  .third-wrapper{
    height:87%;
    width:23%;
    background #fff;
    border:1px solid #fff;
  }
    .t-w{
      height:100%;
      display: inline-block;
      width: 25%;
    }
  .on{
    margin-right:-8px;
    float: right;
  }
  .third-top{
    border-bottom:1px solid #cccccc;
    width: 100%;
    color:$mincolor;
  }
  .third-bottom{

    width: 100%;
    text-align:center;
    line-height :41px;

  }
    .third-bottom>span{
      color:$titlecolor;    white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width:90%;
      margin:0 auto;
      display :inline-block;
    }
  .third-top>img{
    width :100%;

    text-align :center;
  }
  .top-bottom{

    height:20%;
    width 100%;
    display: flex;
    justify-content space-around
  }
  .t-b-f{


    text-align :center;
    line-height :57px;
    display :inline-block;

  }
  .t-b-l{


    display:inline-block;
    text-align :center;
    line-height 57px;


  }
</style>
